---
type: tutorial
title: Constrúyelo tu mismo - Encabezado
i18nReady: true
description: >-
  Tutorial: Crea tu primer blog con Astro —
  Utiliza todo lo que has aprendido hasta ahora para construir un encabezado con navegación adaptable
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una navegación de página que pueda responder a múltiples tamaños de pantalla!

<PreCheck>
  - Crear un encabezado para tu sitio que contenga el componente de navegación
  - Hacer que el componente de navegación sea responsivo
</PreCheck>


<Box icon="puzzle-piece">

## Pruébalo tu mismo - Crea un nuevo componente Header

<Steps>
1. Crea un nuevo componente header. Importa y utiliza tu componente existente `Navigation.astro` dentro de un elemento `<nav>` que esté dentro de un elemento `<header>`.

    <details>
    <summary>¡Enséñame el código!</summary>

    Crea un archivo llamado `Header.astro` en `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="puzzle-piece">

## Pruébalo tu mismo - Actualiza tus páginas

<Steps>
1. En cada página, sustituye el componente `<Navigation/>` existente por tu nuevo encabezado.

    <details>
    <summary>¡Enséñame el código!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Página de inicio";
    ---
    <html lang="es">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Comprueba la vista previa de tu navegador y verifica que tu encabezado se muestra en todas las páginas. Todavía no se verá diferente, pero si inspeccionas la vista previa con las herramientas de desarrollo, verás que ahora tienes elementos como `<header>` y `<nav>` alrededor de los enlaces de navegación.

</Steps>
</Box>

## Añade estilos responsivos

<Steps>
1. Actualiza `Navigation.astro` con la clase CSS para controlar tus enlaces de navegación. Envuelve los enlaces de navegación existentes en un `<div>` con la clase `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Inicio</a>
      <a href="/about">Sobre mi</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Copia los siguientes estilos CSS en `global.css`. Estos estilos:

    - Estilizan y posicionan los enlaces de navegación para dispositivos móviles
    - Incluyen una clase `expanded` que puede activarse para mostrar u ocultar los enlaces en dispositivos móviles.
    - Utilizan una `@media` query para definir estilos diferentes para tamaños de pantalla mayores.

    :::tip[Diseño mobile-first]
    Empieza por definir qué debe ocurrir en las pantallas pequeñas. Las pantallas pequeñas requieren diseños más sencillos. A continuación, ajusta tus estilos para adaptarse a dispositivos más grandes. Si diseñas primero el caso complicado, luego tendrás que trabajar para intentar hacerlo sencillo de nuevo.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* estilos de la barra de navegación*/

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

Cambia el tamaño de la ventana y comprueba si se aplican diferentes estilos a diferentes anchos de pantalla. Tu encabezado es ahora **responsiva** al tamaño de la pantalla mediante el uso de consultas `@media`.



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo utilizar CSS para añadir elementos responsivos a mi sitio.
</Checklist>
</Box>

### Recursos

- [Diseño basado en componentes](https://www.droptica.com/blog/component-based-design/) <Badge>externo</Badge>

- [Etiquetas HTML semánticas](https://www.dofactory.com/html/semantics) <Badge>externo</Badge>

- [Diseño Mobile-first](https://www.mobileapps.com/blog/mobile-first-design) <Badge>externo</Badge>